<section class="content-header" xmlns:shiro="http://www.w3.org/1999/html">
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="#">服务管理</a></li>
        <li class="active">客户服务信息</li>
    </ol>
</section>
<!-- Main content 搜索 新增 删除-->
<section class="content">
    <div class="jax-box">
        <form id="formSearch" class="form-horizontal form-search">
            <div class="form-group">
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="svrType">服务类型</label>
                    <div class="col-xs-8">
                        <select class="form-control" name="type" id="svrType" >
                            <option value=''>全部</option>
                            <option th:value='${serverType.serId}'
                                    th:each="serverType : ${@serverType.getServerType('1')}">[[${serverType.serType}]]</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="status">服务状态</label>
                    <div class="col-xs-8">
                        <select class="form-control" name="status" id="status">
                            <option value="">全部</option>
                            <option value="0">待分配</option>
                            <option value="1">待处理</option>
                            <option value="2">待归档</option>
                            <option value="3">已归档</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <label class="control-label  col-xs-4" for="svrCustId">客户编号</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" id="svrCustId">
                    </div>
                </div>
                <!--                <shiro:hasPermission name="user:list">-->
                <div class="col-md-1 col-sm-6 " style="text-align:left;">
                    <button type="button" id="btn_query" class="btn btn-info">查询</button>
                </div>
                <!--                </shiro:hasPermission>-->
            </div>
        </form>
    </div>
    <div class="jax-box jax-box-table">
        <div id="toolbar" class="btn-group">
            <button id="btn_distribute" type="button" class="btn btn-primary">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>分配指派
            </button>
            <!--            </shiro:hasPermission>-->
            <!--            <shiro:hasPermission name="user:batchDelete">-->


            <button id="btn_Redistribution" type="button" class="btn btn-danger">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>重新分配
            </button>
            <!--            </shiro:hasPermission>-->
            <button id="btn_DealWith" type="button" class="btn btn-danger">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>服务处理
            </button>
            <button id="btn_ChangeStatus" type="button" class="btn btn-danger">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>状态更改
            </button>
        </div>
        <table id="table"></table>
    </div>
</section>
<!-- 服务分配模态框 -->
<div id="serverModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">客户服务分配</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="serverForm">
                    <div class="box-body">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">服务编号 <span style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="svrSerId" id="svrSerId" class="form-control" type="text" require="必填项"
                                       placeholder="" readonly/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">分配给 <span style="color: red">*</span>:</label>
                            <div id="writeUser" class="col-sm-8">

                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="button" id="serverSave" class="btn btn-info">确定</button>
                            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 服务处理模态框 -->
<div id="dealWithModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">服务处理</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="dealWithForm">
                    <div class="box-body">
                        <div class="form-group" hidden>
                            <label class="col-sm-3 control-label">服务状态 <span style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="svrStatus" id="svr-status" class="form-control" type="text"
                                       require="必填项" placeholder="" readonly/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">服务编号 <span style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="svrId" id="svr-id" class="form-control" type="text"
                                       require="必填项" placeholder="" readonly/>
                            </div>
                        </div>
                        <div class="form-group" hidden>
                            <label class="col-sm-3 control-label">处理人id <span style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="svrDealId" id="svr-deal-id" class="form-control" type="text"
                                       require="必填项" placeholder="" readonly/>
                                <span id="userId" hidden><shiro:principal property="userId"/></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">处理人 <span style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="svrDealName" id="svr-deal-name" class="form-control" type="textarea"
                                       require="必填项"
                                       placeholder="" readonly/>
                                <span id="userName" hidden><shiro:principal property="username"/></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">处理方法 <span style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="svrDeal" id="svr_deal" class="form-control" type="text" require="必填项"
                                       placeholder=""/>
                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="button" id="dealWithSave" class="btn btn-info">确定</button>
                            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 更改状态模态框 -->
<div id="changeStatusModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">更改状态</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="changeStatusForm">
                    <div class="box-body">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">服务编号 <span style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="svrSerId" id="changeStatusSerId" class="form-control" type="text"
                                       require="必填项"
                                       placeholder="" readonly/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">当前状态为 <span
                                    style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="dqStatus" id="dqStatus" class="form-control" type="text"
                                       require="必填项"
                                       placeholder="" readonly/>
                                <input name="dqStatusCode" id="dqStatusCode" hidden="hidden" type="text"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">服务状态更改为 <span
                                    style="color: red">*</span>:</label>
                            <div class="col-sm-8" id="changeStatus">

                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="button" id="changeStatusSave" class="btn btn-info">确定</button>
                            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 服务归档模态框 -->
<div id="placeOnFileModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">服务归档</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="placeOnFileForm">
                    <div class="box-body">
                        <div class="form-group" hidden>
                            <label class="col-sm-3 control-label">服务状态 <span style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="svrStatus" id="pSvrStatus" class="form-control" type="text"
                                       require="必填项" placeholder="" readonly/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">服务编号 <span style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="svrId" id="pSvrId" class="form-control" type="text"
                                       require="必填项"
                                       placeholder="" readonly/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">处理结果 <span
                                    style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="svrResult" id="pSvrResult" class="form-control" type="text"
                                       require="必填项"
                                       placeholder=""/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户满意度 <span
                                    style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="svrSatisfy" id="pSvrSatisfy" class="form-control" type="text"
                                       require="必填项"
                                       placeholder=""/>
                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="button" id="placeOnFileSave" class="btn btn-info">确定</button>
                            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    var columns = [
        {
            checkbox: true,
        }, {
            field: 'svrId',
            title: '服务编号',
            align: "center"
        }, {
            field: 'svrSerType',
            title: '类型',
            align: "center"
        }, {
            field: 'svrCustName',
            title: '客户姓名',
            align: "center",
        }, {
            field: 'svrCreateName',
            title: '创建人',
            align: "center",
        }, {
            field: 'svrDueName',
            title: '分配人',
            align: "center",
        }, {
            field: 'svrDealName',
            title: '处理人',
            align: "center",
        }, {
            field: 'svrDeal',
            title: '处理方法',
            align: "center",
        }, {
            field: 'svrDealDate',
            title: '处理时间',
            align: "center",
        }, {
            field: 'svrResult',
            title: '处理结果',
            align: "center",
        }, {
            field: 'svrSatisfy',
            title: '服务满意度',
            align: "center",
        }, {
            field: 'svrStatus',
            title: '状态',
            align: "center",
            formatter: function (value, row, index) {
                if (row.svrStatus == 0) {
                    return "<p style='color: red'>待分配</p>"
                } else if (row.svrStatus == 1) {
                    return "<p style='color: yellowgreen'>待处理</p>"
                } else if (row.svrStatus == 2) {
                    return "<p style='color: green'>待归档</p>"
                } else {
                    return "<p style='color: #2b2b2b'>已归档</p>"
                }
            }
        }, {
            field: 'operation',
            title: '操作',
            align: "center",
            formatter: function (value, row, index) {
                if (row.svrStatus === 0) {
                    return edit = '<a class="table-btn table-btn-info" href="javascript:void(0)" onclick="distribute(' + row.svrId + "," + row.svrStatus + ')">分配</a>';
                } else if (row.svrStatus === 1) {
                    return edit = "<a class='table-btn table-btn-warning' href='javascript:void(0)' onclick='dealWith(" + row.svrId + "," + row.svrStatus + ")'>处理</a>";
                } else if (row.svrStatus === 2) {
                    return edit = '<a class="table-btn table-btn-danger" href="javascript:void(0)" onclick="placeOnFile(' + row.svrId + "," + row.svrStatus + ')">归档</a>';
                } else {
                    return edit = "<span class='table-btn table-btn-success'>无操作</span>";
                }
            }
        }];
    var options = {
        id: "#table",
        url: '/cstServer/list',
        toolbar: '#toolbar',
        columns: columns,
        showRefresh: true,
        queryParams: queryParams,

    }
    Core.initTable(options);
    /*查询用户参数*/
    function queryParams(params) {
        var temp = { //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
            limit: params.limit, //页面大小
            offset: params.offset, //页码
            svrSerId: $("#svrType").val(),
            svrStatus: $("#status").val(),
            svrCustName: $("#svrCustName").val(),
        };
        return temp;
    }
    $(function () {
        //批量开始指配-已完成
        $("#btn_distribute").click(function () {
            // 获取服务表信息
            var checkedRows = Core.selectMutiData("#table");
            // 判断状态与按钮事件是否吻合
            var pd = judging(0, checkedRows);
            if (pd) {
                //调用获取服务列表选中的编号
                var svrIdStr = getSvrIdStr();
                // 选中的编号放入input框
                $("#svrSerId").val(svrIdStr);
                // 显示模态框
                $("#serverModal").modal("show");
                // 调用用户信息下拉框方法
                getUserInfo();
            }
        })
        //批量重新分配-已完成
        $("#btn_Redistribution").click(function () {
            var checkedRows = Core.selectMutiData("#table");
            if (checkedRows) {
                //获取服务列表选中的编号
                var svrIdStr = getSvrIdStr();
                // 选中的编号放入input框
                $("#svrSerId").val(svrIdStr);
                // 显示模态框
                $("#serverModal").modal("show");
                // 调用用户信息下拉框方法
                getUserInfo();
            }
        })
        //批量服务处理-已完成
        $("#btn_DealWith").click(function () {
            var checkedRows = Core.selectMutiData("#table");
            if (checkedRows) {
                var pd = judging(1, checkedRows);//判断所选的状态是否与第一条状态一致
                if (pd) {
                    var svrIdStr = getSvrIdStr(checkedRows);//获取服务列表选中的编号
                    $("#svr-id").val(svrIdStr);// 选中的编号放入input框
                    var userName = $("#userName").html();//将账号用户名展示
                    var userId = $("#userId").html();
                    $("#svr-deal-id").val(userId);
                    $("#svr-deal-name").val(userName);
                    $("#dealWithModal").modal("show");// 显示模态框
                }
            }
        })
        //批量更改状态-已完成
        $("#btn_ChangeStatus").click(function () {
            var checkedRows = Core.selectMutiData("#table");
            var svrStatus = checkedRows[0].svrStatus;//得到所选内容的第一条的状态
            var pd = judging(svrStatus, checkedRows);//判断所选的状态是否与第一条状态一致
            if (pd) {
                var svrIdStr = getSvrIdStr(checkedRows);//获取服务列表选中的编号
                if (svrStatus == 0) {
                    $("#dqStatus").val("待分配");
                    $("#dqStatusCode").val(0);
                } else if (svrStatus == 1) {
                    $("#dqStatus").val("待处理");
                    $("#dqStatusCode").val(1);
                } else if (svrStatus == 2) {
                    $("#dqStatus").val("待归档");
                    $("#dqStatusCode").val(2);
                } else {
                    $("#dqStatus").val("已归档");
                    $("#dqStatusCode").val(3);
                }
                $("#changeStatusSerId").val(svrIdStr);// 选中的编号放入input框
                var text = "<select class='form-control' id='status' name='status'><option value='100'>请选择</option>";
                for (var i = 0; i < 3; i++) {
                    if (i == 0) {
                        text = text + "<option value=" + i + ">待分配</option>";
                    } else if (i == 1) {
                        text = text + "<option value=" + i + ">待处理</option>";
                    } else {
                        text = text + "<option value=" + i + ">待归档</option>";
                    }
                }
                text = text + "</select>";
                $("#changeStatus").text("");
                $("#changeStatus").append(text);
                $("#changeStatusModal").modal("show");// 显示模态框
            }
        })
        //保存分配-已完成
        $("#serverSave").click(function () {
            let array = $("#yhId").val().split("|");
            if (array[0] > 0) {
                var serialize = $("#serverForm").serialize();
                var cstParams = {
                    svrId: $("#svrSerId").val(),
                    svrDueId: array[0],
                    svrDueName: array[1]
                }
                Core.postAjax("/cstServer/distribute", cstParams, function (data) {
                    if (data.status == 200) {
                        $("#serverModal").modal("hide");
                        Core.refreshTable("#table");
                        layer.msg(data.msg);
                        clear("#serverModal");//清空模态框表单数据
                    } else {
                        layer.msg(data.msg);
                    }
                }, "get")
            } else {
                layer.msg("请选择分配人!");
            }
        })
        //保存状态-已完成
        $("#changeStatusSave").click(function () {
            var dqStatus = $("#dqStatusCode").val();
            var status = $("#status").val();
            if (status < dqStatus) {
                var changeStatusParams = {
                    svrId: $("#changeStatusSerId").val(),
                    svrStatus: status
                }
                Core.postAjax("/cstServer/changeStatus", changeStatusParams, function (data) {
                    if (data.status == 200) {
                        $("#changeStatusModal").modal("hide");//隐藏归档模态框
                        Core.refreshTable("#table");
                        layer.msg(data.msg);
                        clear("#changeStatusModal");//清空模态框表单数据
                    } else {
                        layer.msg(data.msg);
                    }
                }, "get")
            } else if (status === dqStatus) {
                layer.msg("状态一致，无需更改")
            } else if (status == 100) {
                layer.msg("请选择更改状态")
            } else {
                layer.msg("状态更改失败")
            }
        })
        //保存处理-已完成
        $("#dealWithSave").click(function () {
            Core.postAjax("/cstServer/dealWith", $("#dealWithForm").serialize(), function (data) {
                if (data.status == 200) {
                    $("#dealWithModal").modal("hide");//隐藏归档模态框
                    Core.refreshTable("#table")
                    layer.msg(data.msg)
                    clear("#dealWithModal");//清空模态框表单数据
                } else {
                    layer.msg(data.msg);
                }
            }, "get")
        })
        //保存归档-已完成
        $("#placeOnFileSave").click(function () {
            Core.postAjax("/cstServer/placeOnFile", $("#placeOnFileForm").serialize(), function (data) {
                if (data.status == 200) {
                    $("#placeOnFileModal").modal("hide");//隐藏归档模态框
                    Core.refreshTable("#table")
                    layer.msg(data.msg);
                    clear("#placeOnFileModal");//清空模态框表单数据
                } else {
                    layer.msg(data.msg);
                }
            })

        })
        //查询
        $("#btn_query").click(function () {
            Core.refreshTable("#table");
        });
        //单条服务处理
        dealWith = function (svrId, status) {
            if (status === 1) {
                var userId = $("#userId").html();// 获取当前登录的用户名
                var userName = $("#userName").html();// 获取当前登录的用户名id
                $("#svr-status").val(status);// 赋值给input
                $("#svr-id").val(svrId);
                $("#svr-deal-id").val(userId);
                $("#svr-deal-name").val(userName);
                $("#dealWithModal").modal("show");//显示服务处理模态框
            }
        }
        //服务单条分配
        distribute = function (svrId, status) {
            $("#svrSerId").val(svrId);// 选中的编号放入input框
            $("#serverModal").modal("show");// 显示服务分配模态框
            getUserInfo();// 调用用户信息下拉框方法
        }
        //服务归档
        placeOnFile = function (svrId, status) {
            $("#pSvrId").val(svrId);//中的编号放入input框
            $("#pSvrStatus").val(status);//选中的状态放入input框
            $("#placeOnFileModal").modal("show");//显示服务分配模态框
        }
        //获取服务列表选中的编号
        getSvrIdStr = function (checkedRows) {
            var svrIdStr = "";
            $.each(checkedRows, function (i, item) {
                svrIdStr += (item.svrId + ",");
            })//把选中的id组成字符串
            svrIdStr = svrIdStr.substring(0, svrIdStr.length - 1);
            return svrIdStr;
        }
        //用户信息下拉框
        const getUserInfo = function () {
            var test = ""
            var params = {
                username: "",
                email: "",
                phone: ""
            }
            Core.postAjax("/user/lists", params, function (data) {
                var userList = data.data;
                test = "<select class='form-control' id='yhId' name='yhId'><option value='0'>请选择</option>"
                for (var i = 0; i < userList.length; i++) {
                    test = test + "<option value=" + userList[i].userId + "|" + userList[i].username + " onclick='abc(1)'>" + userList[i].username + "</option>"
                }
                test = test + "</select>";
                $("#writeUser").text("");
                $("#writeUser").append(test);
            })
        }
        //判断按钮点击是否与该功能一致
        const judging = function (val, checkedRows) {
            var pd = true;
            if (val == 0) {
                for (var i = 0; i < checkedRows.length; i++) {
                    if (checkedRows[i].svrStatus != 0) {
                        layer.msg("选项包含除（待分配）之外选项");
                        pd = false
                        return pd
                    }//判断是否有不是待分配的选项
                }
                return pd
            } else if (val == 1) {
                for (var i = 0; i < checkedRows.length; i++) {
                    if (checkedRows[i].svrStatus != 1) {
                        layer.msg("选项包含除（待处理）之外选项");
                        pd = false
                        return pd
                    }//判断是否有不是待处理的选项
                }
                return pd
            } else if (val == 2) {
                for (var i = 0; i < checkedRows.length; i++) {
                    if (checkedRows[i].svrStatus != 2) {
                        layer.msg("选项包含除（待归档）之外选项");
                        pd = false
                        return pd
                    }//判断是否有不是待处理的选项
                }
                return pd
            }
            return false;
        }
        //
        optionbtn = function (serId) {
            console.log(serId);
        }
        //清空表单内数据
        function clear(modal) {
            $(modal).find("form").trigger("reset");
        }
    })
</script>
